<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D魔方</title>
	<style type="text/css">
	*{padding: 0 ;margin:0;}
	.rongqi{width: 400px;
	        height: 400px;
	    	border: 1px solid red;
	        margin: 0 auto;
	        position: relative;
	        perspective: 500px;
            transform-style: preserve-3d;
            perspective-origin:50% 50%;}
	.box{width: 100px;
		 height: 100px;
		 border: 1px solid red;
		 transform-style: preserve-3d;
		 left: 0;
         right: 0;
         top:0;
         bottom: 0;
		 margin: auto auto;
		 position: absolute;
		 animation: boxrun 5s;
		 }
    .box div{width: 100px;
             height: 100px;
             background-color: rgba(144,144,144,0.5 );
             text-align: center;
             line-height: 100px;
             position: absolute;
             border: 1px solid black;

             }
    .box1{transform:rotateX(90deg) translateZ(50px);}
    .box2{transform:rotateX(90deg) translateZ(-50px);}
    	  
     .box3{transform:rotateY(90deg) translateZ(50px);} 
     .box4{transform:rotateY(90deg) translateZ(-50px);}   

     .box5{transform:translateZ(50px);}  
     .box6{transform:translateZ(-50px);}  

     @keyframes boxrun{
     	0%{transform:rotatex(0deg) rotateY(0deg);}
     	100%{transform:rotatex(360deg) rotateY(360deg);
     }

          

		
	</style>
	
</head>
<body>
	<div class="rongqi">
	<div class="box">
		<div class="box1">A</div>
		<div class="box2">B</div>
		<div class="box3">C</div>
		<div class="box4">D</div>
		<div class="box5">E</div>
		<div class="box6">F</div>

	</div>
	</div>

	
</body>
</html>